<template>
  <div :class="prefixCls" class="relative h-[100%]">
    <div class="relative mx-auto h-full flex">
      <div class="relative flex-1 p-30px login-bg lt-sm:p-10px">
        <div
          class="flex items-center justify-between at-2xl:justify-between at-xl:justify-between px-10px"
        >
          <!-- 左上角的 logo + 系统标题 -->

          <div class="pos-absolute top-4% left-8% flex items-center">
            <img alt="" class="mr-10px w-180px" src="@/assets/imgs/login-long.png" />
            <!-- <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> -->
          </div>

          <!-- 右上角的主题、语言选择 -->
          <!-- <div class="flex items-center justify-end space-x-10px">
            <ThemeSwitch />
            <LocaleDropdown class="dark:text-white" />
          </div> -->
        </div>
        <div class="m-auto h-full max-w-1000px flex flex-col items-center justify-center">
          <ContentWrap
            :show-header="false"
            :body-style="{ padding: 0 }"
            class="mb-0 h-526px border-none!"
          >
            <div class="flex items-center justify-center">
              <!-- 左边的背景图 + 欢迎语 -->
              <div class="lt-sm:hidden flex items-center justify-center text-center">
                <TransitionGroup
                  class="relative"
                  appear
                  enter-active-class="animate__animated animate__bounceInLeft"
                  tag="div"
                >
                  <img key="1" alt="" class="w-600px h-526px" src="@/assets/imgs/login-main.jpg" />
                  <div
                    class="pos-absolute top-0 h-100% w-100% flex flex-col justify-center items-center"
                  >
                    <div class="text-white font-bold custom-text-50"> METON SAAS </div>
                    <div class="text-white font-bold custom-text-40"> 美咚智慧门店 </div>
                    <div class="text-white mt-20px"> 致力于打造最好用的连锁企业管理系统！ </div>
                    <div class="text-white mt-5px">
                      美咚智慧门店帮你管人、管钱、管营销。用美咚，生意更轻松！
                    </div>
                  </div>
                  <!-- <div key="2" class="text-3xl">{{ t('login.welcome') }}</div>
                  <div key="3" class="mt-5 text-14px font-normal">
                    {{ t('login.message') }}
                  </div> -->
                </TransitionGroup>
              </div>
              <div>
                <!-- 右边的登录界面 -->
                <Transition appear enter-active-class="animate__animated animate__bounceInRight">
                  <div
                    class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
                  >
                    <!-- 账号登录 -->
                    <LoginForm class="m-auto h-auto p-x-20px lt-xl:(rounded-3xl light:bg-white)" />
                    <!-- 手机登录 -->
                    <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
                    <!-- 二维码登录 -->
                    <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
                    <!-- 注册 -->
                    <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />

                    <!-- 三方登录 -->
                    <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
                    <!-- 重置密码 -->
                    <ResetPasswordForm
                      class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)"
                    />
                  </div>
                </Transition>
              </div>
            </div>
          </ContentWrap>
          <div class="beian-content custom-text-16">
            <div>美咚智慧门店管理系统 V9.0.0</div>
            <div>
              <a
                target="_blank"
                class="pr-5px flex"
                style="display: inline-flex"
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61011302001379"
              >
                <img
                  src="@/assets/imgs/beian-logo.png"
                  class="icon-box pr-5px"
                  style="display: inline"
                />
                <span>陕公安网备 61011302001379号</span>
              </a>
              <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">
                <span>陕ICP备18000426号-2</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
// import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
// import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import * as authUtil from '@/utils/auth'

import {
  LoginForm,
  MobileForm,
  QrCodeForm,
  RegisterForm,
  SSOLoginVue,
  ResetPasswordForm
} from './components'

defineOptions({ name: 'Login' })

// const { t } = useI18n()
// const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
onMounted(() => {
  authUtil.setTenantId('')
})
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.login-bg {
  background: url('@/assets/imgs/login-bg.png');
}
.dark .login-bg {
  background: var(--el-bg-color);
}

.beian-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 15%;
  color: var(--el-text-color-secondary);
  .icon-box {
    width: 25px;
    height: 20px;
  }

  a {
    color: var(--el-text-color-secondary);
    text-decoration: none;
    display: inline-block;
  }
}
</style>

<style lang="scss">
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}
</style>
